<template>
	<view class='share'>

		<swiper class="swiperBox" :current="current" previous-margin="120rpx" next-margin="120rpx" @change="swiperChange">
			<swiper-item class="flex_conter_c" v-for="(item, index) in share_img_list" :key="index">
				<view class="swiper-item flex_conter_c" :class="current == index ? 'active' : ''">
					<image :src="item.img" mode="widthFix" class='immm'></image>
					<image :src="code_url" mode="widthFix" :style="{left: (480*item.position_x/750 + 'rpx'),top: (480*item.position_y/750 + 'rpx'),width:(480*item.code_width/750 + 'rpx')}" class='code'></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="shareBox">
			<!--  #ifdef MP-WEIXIN -->
			<!-- <button size="mini" class="item" open-type="share" hover-class="node">
				<view class="iconBox weixin">
					<text class="custom-icon custom-icon-weixin1"></text>
				</view>
				<text class="text">发送好友</text>
			</button> -->
			<!--  #endif -->

			<button size="mini" class="item" hover-class="node" @click="download">
				<view class="iconBox download">
					<text class="custom-icon custom-icon-xiazai"></text>
				</view>
				<text class="text">保存本地</text>
			</button>
		</view>

		<canvas :canvas-id="item.id" :id="item.id" v-for="(item,index) in share_img_list" :key="index"></canvas>
		<canvas style="width: 280px;height: 280px;" canvas-id="couponQrcode" id="couponQrcode"></canvas>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	import QRCode from '@/common/qrcode.js';
	
	export default {
		data() {
			return {
				qrImage: '',
				current: 0,
				share_img_list: [],
				code_url: '',
				user_id:0,
				login_url:''
			}
		},
		onLoad() {
			this.loadData();
		},
		onShareAppMessage: function(e) {
			let plat_name = uni.getStorageSync('xixuan_plat_name');
			if (e.from == 'button') {
				return {
					title: '邀您一起加入'+plat_name+'！！！',
					path: '/pages/index/index?uuid='+this.user_id
				}
			} else {
				return {
					title: '邀您一起加入'+plat_name+'！！！',
					path: '/pages/index/index?uuid='+this.user_id
				}
			}
		},
		methods: {
			loadData: function() {
				// 加载数据
				var that = this;
				util.requestPost("api.php/user/ShareImgList", {use_scene:util.getCurrentSecene()}, function(res) {
					that.share_img_list = res.data.share_img_list;
					that.code_url = res.data.code_url;
					that.user_id = res.data.user_id;
					that.login_url = res.data.login_url;
					// #ifdef MP-WEIXIN
					that.getShareCodeImg();
					// #endif
					// #ifndef MP-WEIXIN
					that.getRegisterShareCodeImg();
					// #endif
				}, true);
			},
			// 绘制海报
			async canvasEvent(imgUrl, canvasId, id, x, y, w, h,bg_w,bg_h) {
				const that = this;
				var ctx = uni.createCanvasContext(canvasId) //绑定画布
				ctx.drawImage(imgUrl, 0, 0, bg_w, bg_h); //填充进图片
				
				ctx.drawImage(this.qrImage, x, y, parseInt(w), parseInt(h));
				
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: canvasId,
						success: (res) => {
							that.share_img_list[that.current].download_img = res.tempFilePath;
							that.saveImg();
						},
						fail(res) {
							console.log("绘图失败："+res);
						}
					})
				}); //输出到画布中
			},
			// 下载图片
			download() {
				util.showLoading();
				let that = this;
				if(this.qrImage){
					let share_img = this.share_img_list[this.current];
					if(share_img.download_img){
						that.saveImg();
					}else{
						let share_img_path = share_img.img;
						if (share_img_path.indexOf("https") != 0) {
							share_img_path = "https" + share_img_path.substr(4);
						}
						
						// #ifdef H5
							// util.toast("H5暂不支持下载！");
							let base64;
							let img = share_img_path;
							let image = new Image();
							image.src = img;
							image.crossOrigin = 'Anonymous';
							image.onload = function() {
							    let base64 = getBase64Image(image);
								uni.getImageInfo({
									src: share_img_path,
									success(res) {
										console.log(res);
										that.canvasEvent(base64, share_img.id, '#' + share_img.id, share_img.position_x, share_img.position_y, share_img.code_width,
											share_img.code_height,res.width,res.height);
									}
								});
							}
							// 图像转Base64
							function getBase64Image (img) {
							    let canvas = document.createElement("canvas");
							    canvas.width = img.width;
							    canvas.height = img.height;
							    let ctx = canvas.getContext("2d");
							    ctx.drawImage(img, 0, 0, img.width, img.height);
							    let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
							    let dataURL = canvas.toDataURL("image/png" + ext);
							    return dataURL;
							}
						// #endif
						
						// #ifndef H5
						uni.getImageInfo({
							src: share_img_path,
							success(res) {
								console.log(res);
								that.canvasEvent(res.path, share_img.id, '#' + share_img.id, share_img.position_x, share_img.position_y, share_img.code_width,
									share_img.code_height,res.width,res.height);
							}
						});
						// #endif
						
					}
					
				}else{
					util.toast("网络卡请稍后重试！");
				}
				
			},
			// 保存图片
			saveImg(){
				const src = this.share_img_list[this.current].download_img;
				
				// #ifdef  H5
					console.log(src)
					let oA = document.createElement("a");
					oA.download = ''; // 设置下载的文件名，默认是'下载'
					oA.href = src;
					document.body.appendChild(oA);
					oA.click();
					oA.remove(); // 下载之后把创建的元素删除
				// #endif
				
				// #ifndef  H5
				uni.saveImageToPhotosAlbum({ //保存图片
					filePath: src,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
						});
					}
				})
				// #endif
				uni.hideLoading();
			},
			// 获取小程序分享二维码
			getShareCodeImg() {
				const that = this;
				let share_img_path = this.code_url;
				if (share_img_path.indexOf("https") != 0) {
					share_img_path = "https" + share_img_path.substr(4);
				}
				uni.getImageInfo({
					src: share_img_path,
					success(res) {
						that.qrImage = res.path;
					}
				});
			},
			// 获取注册分享二维码
			getRegisterShareCodeImg () {
				const that = this
				new QRCode({
					context: that, // 上下文环境
					canvasId: 'couponQrcode', // canvas-id
					usingComponents: false, // 是否是自定义组件
					text: that.login_url,
					width: 260,
					height: 260,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: 3, // 二维码可辨识度
					cbResult: function (res) { // 生成二维码的回调
						that.qrImage = res;
						that.code_url = res;
					},
				})
			},
			// 滑动轮播图
			swiperChange(e) {
				this.current = e.detail.current
			}
		}
	}
</script>

<style scoped>
	.share {
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
		position: relative;
	}

	canvas {
		position: absolute;
		width: 750px;
		height: 1334px;
		top: -99999px;
		left: -99999px;
		z-index: 9999;
	}

	.immm {
		width: 480rpx;
	}
	
	.code{
		position: fixed;
	}

	#couponQrcode {
		position: fixed;
		/* top: 0;
	left: 0;
	z-index: 99; */
		left: 9999px;
		z-index: -99;
		padding: 10px;
	}

	.swiperBox {
		height: calc(100vh - 200rpx);
		width: 750rpx;
	}

	.swiperBox .swiper-item {
		transform: scale(0.94);
		transition: all 0.3s ease;
	}

	.swiperBox .swiper-item.active {
		transform: scale(1);
	}

	.shareBox {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 200rpx;
		border-radius: 12rpx 12rpx 0 0;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shareBox .item {
		margin: 0;
		background: none;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.shareBox .item::after {
		border: none;
	}

	.shareBox .item .iconBox {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.shareBox .item .iconBox.weixin {
		background: linear-gradient(90deg, #8cdc76, #4db232);
	}

	.shareBox .item .iconBox.download {
		background: var(--btnBgColor);
	}

	.shareBox .item .iconBox .custom-icon {
		color: #ffffff;
		font-size: 44rpx;
	}

	.shareBox .item .text {
		font-size: 28rpx;
		font-weight: 500;
		line-height: 28rpx;
	}
</style>
